<template>
  <div class="xq-form-wrapper page-miH page-bgBack" style="padding: 24px">
    <a-row>
      <a-col :span="17" class="mb24" v-if="$route.query.pageType">
        <a-button @click="$router.go(-1)"> <a-icon type="left" />返回 </a-button>
      </a-col>
      <a-col :span="17">
        <a-input-search
          allowClear
          v-model="searchName"
          placeholder="搜索单位名称/联系人姓名/联系电话"
          style="width: 274px;"
          @search="onSearch"
        />
        <!-- <div class="xq-form-search" style="margin-left: -50px;">
          <XqFormBuild
            ref="searchForm"
            mode="search"
            :searchSpan="12"
            :dataSource="{}"
            :dynamicData="dynamicData"
            :formFields="FormJson['fields']"
            :formValidators="FormJson['validators']"
            :formConfig="FormJson['config']['search']"
            @change="filterRecord"
          >
          </XqFormBuild>
        </div> -->
      </a-col>
      <a-col :span="7">
        <div style="text-align: right">
          <a-space>
            <a-button :disabled="!selectedRowKeys.length" @click="() => download(1)">批量导出</a-button>
            <a-button type="primary" :disabled="!tableData.length" @click="() => download(2)">全部导出</a-button>
          </a-space>
        </div>
      </a-col>
    </a-row>

    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :pagination="false"
        :scroll="{ x: columns.length * 150 }"
        :customize="FormJson['config']['table']['customize']"
        :dataSource="tableData"
        :columns="columns"
        :rowSelection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
      >
        <!--------------------------------------------主要内容，表格，自定义 header -------------------------------------------->
        <template v-for="(col, index) in columns" #[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-------------------------------------------- 主要内容，表格，自定义 td -------------------------------------------->
        <template v-for="(col, index) in columns" #[col.dataIndex]="text, record">
          <!-------------------------------------------- 主操作列区域start -------------------------------------------->
          <span v-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="showUpdateModal(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm :title="`确认要删除记录吗？`" okText="确认" cancelText="取消" @confirm="deleteRecord(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          <a-button v-else-if="col.dataIndex === 'empCount'" :key="index" size="small" type="link" @click="showEmp(record)">{{
            text
          }}</a-button>
          <!-------------------------------------------- 主操作列区域end -------------------------------------------->
          <!-------------------------------------------- 枚举值转换start -------------------------------------------->
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          <!-------------------------------------------- 枚举值转换end -------------------------------------------->
        </template>
      </XqTable>
      <!-------------------------------------------- 分页区域start -------------------------------------------->
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="currentPage"
          :pageSize="pageSize"
          :total="total"
          :showSizeChanger="true"
          :showQuickJumper="true"
          :pageSizeOptions="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
      <!-------------------------------------------- 分页区域区域end -------------------------------------------->
    </a-spin>

    <a-layout class="staff-manage-wrapper p24">
      <a-modal :footer="null" v-model="empVisible" :title="`${compyNam}` + '员工详情'" width="800px" @ok="handleEmpOk">
        <a-input-search
          v-model="unitSearchForm.keyWord"
          :allow-clear="true"
          placeholder="姓名/手机号/身份证号"
          style="width: 180px;"
          @search="unitNameChange"
        />
        <a-table :data-source="empGroup" :columns="empList" :pagination="pagination2" style="margin-top:24px" @change="handlePageChange" />
      </a-modal>
    </a-layout>
  </div>
</template>

<script>
import { getComany, getEmp } from "@/api/overview/employer";
import { mapGetters } from "vuex";

import FormJson from "./employer/FormJson"; // 引入FormJson数据
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { retrieveReq, createReq, deleteReq, deleteBatchReq, updateReq } from "./employer/api"; // 引入接口文件

const curdMixin = new XqCurdMixin({
  // createReq,
  // retrieveReq,
  // updateReq,
  // deleteReq,
  // deleteBatchReq,
  FormJson,
  tableConfigKey: "table"
});
const empList = [
  {
    title: "姓名",
    dataIndex: "name",
    width: 120
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    ellipsis: true,
    width: 220
  },
  {
    title: "手机号",
    dataIndex: "phone",
    ellipsis: true,
    width: 120
  },
  {
    title: "合同年限",
    dataIndex: "timeLimitStr",
    ellipsis: true,
    width: 120
  },
  {
    title: "合同到期时间",
    dataIndex: "endTime",
    ellipsis: true,
    width: 160
  }
];
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
export default {
  mixins: [curdMixin, mixin],

  data() {
    return {
      empList,
      compyNam: "",
      empVisible: false,
      syncType: 0,
      equipmentIdList: [],
      syncVisible: false,
      name: "",
      joinCityCode: "",
      joinCityName: "",
      searchForm: {
        name: ""
      },
      unitSearchForm: {},
      selectedRowKeys: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        pageSizeOptions: ["10", "20", "50", "100"],
        showQuickJumper: true,
        showSizeChanger: true
      },
      pagination2: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        pageSizeOptions: ["10", "20", "50", "100"],
        showQuickJumper: true,
        showSizeChanger: true
      },
      empGroup: [],

      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
      data: [],
      property: "",
      empRecord: "",
      tableLoading: false,
      ids: null,
      searchName: "",
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  computed: {
    ...mapGetters(["permissions_site"]),
    ...mapGetters({
      SelectedAllIds: "site/SelectedAllIds"
    })
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;

    this.getComanyList();
  },

  methods: {
    unitNameChange(e) {
      this.unitSearchForm.keyWord = e;
      getEmp({
        companyId: this.empRecord.id,
        nameOrPhone: this.unitSearchForm.keyWord
      }).then(res => {
        this.empGroup = res.data.entities;
      });
    },
    handlePageChange(pagination, filters, sorter) {
      this.pagination2.current = pagination.current;
      this.pagination2.pageSize = pagination.pageSize;
    },
    handleEmpOk() {
      this.empVisible = false;
    },
    showEmp(record) {
      this.empRecord = record;
      this.pagination2.current = 1;
      this.pagination2.pageSize = 10;
      this.unitSearchForm = {};
      this.empVisible = true;
      this.compyNam = record.name;
      getEmp({ companyId: record.id }).then(res => {
        this.empGroup = res.data.entities;
      });
    },
    getComanyList() {
      this.tableLoading = true;
      const data = {
        name: this.searchName,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      };
      // if (this.ids) data.ids = this.ids.split(",");
      const ids = this.SelectedAllIds;
      data.ids = ids.split(",");
      getComany(data)
        .then(res => {
          this.tableData = res.data.entities || [];
          this.total = res.data.entityCount;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.tableLoading = false;
        });
    },
    onPageChange(page) {
      this.currentPage = page;
      this.getComanyList();
    },
    onPageSizeChange(current, pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
      this.getComanyList();
    },
    onSearch() {
      this.currentPage = 1;
      this.getComanyList();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // 导出员工信息excel表
    download(i) {
      if (i === 2) {
        this.params = {
          companyId: this.companyId,
          name: this.searchName
        };
      } else {
        this.params = {
          companyId: this.companyId,
          ids: this.selectedRowKeys
        };
      }
      if (!this.selectedRowKeys.length && i === 1) {
        this.$notification["error"]({
          message: "error",
          description: "导出失败，至少选择一个单位"
        });
      }
      if (i === 2 || this.selectedRowKeys.length) {
        this.url = `/hr/api/v1/statisticsPage/exportComanyWithEmpCount`;
        let siteName = "";
        this.permissions_site.forEach((item, index) => {
          if (item.currSite) siteName = item.name;
        });
        this.excelName = `${siteName}用工单位详情.xlsx`;
        this.getDownload();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.mr12 {
  background: var(--primary);
  color: #ffffff;
}
</style>
